import React, { Component } from 'react';
import { connect } from 'dva'; //调取接口用
import moment from 'moment';
import { Table, Button, Card, Modal, Form, Icon, Input, Menu, Dropdown, message, TreeSelect, Select, Switch, Row, Col, DatePicker,Upload } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from '../Mana/Role.less';
import ReactDOM from 'react-dom'


/*按钮 -点击弹出富文本框*/
class AvatarButton extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>编辑内容</Button>
        <Modal
        maskClosable={false}
      	  destroyOnClose={true}
          title="描述内容"
          width="90%"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
         <Demo/>
        </Modal>
      </div>
    );
  }
}

var contents = "";//富文本框

// 引入编辑器以及编辑器样式
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'

class Demo extends React.Component {
	render() {
		const editorProps = {
			height: 500,
			contentFormat: 'html',
			initialContent: contents,
			onChange: this.handleChange,
			media: {
				allowPasteImage: true, // 是否允许直接粘贴剪贴板图片（例如QQ截图等）到编辑器
				image: true, // 开启图片插入功能
				video: true, // 开启视频插入功能
				audio: true, // 开启音频插入功能
				validateFn: null, // 指定本地校验函数，说明见下文
				uploadFn: this.uploadFns, // 指定上传函数，说明见下文
				removeConfirmFn: null, // 指定删除前的确认函数，说明见下文
				onRemove: null, // 指定媒体库文件被删除时的回调，参数为被删除的媒体文件列表(数组)
				onChange: null, // 指定媒体库文件列表发生变化时的回调，参数为媒体库文件列表(数组)
				onInsert: null, // 指定从媒体库插入文件到编辑器时的回调，参数为被插入的媒体文件列表(数组)
			},
		}
		return (
			<div className="demo">
				<BraftEditor {...editorProps} />
			</div>
		)
	}
	handleChange = (content) => {
		contents = content;
	}
	uploadFns = (param) => {
		const serverURL = "api/web/attachment/upload.manage?token=" + sessionStorage.getItem('token');
		const xhr = new XMLHttpRequest
		const fd = new FormData();
		// libraryId可用于通过mediaLibrary示例来操作对应的媒体内容
		const successFn = (response) => {
			// 假设服务端直接返回文件上传后的地址
			// 上传成功后调用param.success并传入上传后的文件地址
			param.success({
				url: JSON.parse(xhr.response).obj.path
			});
		}
		const progressFn = (event) => {
			// 上传进度发生变化时调用param.progress
			param.progress(event.loaded / event.total * 100)
		}
		const errorFn = (response) => {
			// 上传发生错误时调用param.error
			param.error({
				msg: 'unable to upload.'
			})
		}
		xhr.upload.addEventListener("progress", progressFn, false)
		xhr.addEventListener("load", successFn, false)
		xhr.addEventListener("error", errorFn, false)
		xhr.addEventListener("abort", errorFn, false)
		fd.append('file', param.file)
		xhr.open('POST', serverURL, true)
		xhr.send(fd)
	}
}



//外部富文本引用 react-lz-editor
//import ReactDOM from 'react-dom';
import LzEditor from 'react-lz-editor/index.js'
class Test extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			htmlContent: contents,
			markdownContent: contents,
			rawContent: contents,
			responseList: []
		}
		this.receiveHtml = this.receiveHtml.bind(this);
		this.onChange = this.onChange.bind(this);
	}
	receiveHtml(content) {
		this.setState({ responseList: [] });
		contents = content;
	}
	onChange(info) {
		let currFileList = info.fileList;
		currFileList = currFileList.filter((f) => (!f.length));
		//读取远程路径并显示链接
		currFileList = currFileList.map((file) => {
			if (file.response) {
				// 组件会将 file.url 作为链接进行展示
				file.url = file.response.obj.path;
			}
			if (!file.length) {
				return file;
			}
		});
		let _this = this;
		//按照服务器返回信息筛选成功上传的文件
		currFileList = currFileList.filter((file) => {
			//根据多选选项更新添加内容
			let hasNoExistCurrFileInUploadedList = file.name;
			if (hasNoExistCurrFileInUploadedList) {
				if (!!_this.props.isMultiple == true) {
					_this.state.responseList.push(file);
				} else {
					_this.state.responseList = [file];
				}
			}
			return !!file.response || (!!file.url && file.status == "done") || file.status == "uploading";
		});
		// currFileList = uniqBy(currFileList, "name");
		if (!!currFileList && currFileList.length != 0) {
			// console.log("upload set files as fileList", currFileList);
			this.setState({ responseList: currFileList });
		}
		_this.forceUpdate();
	}


	render() {
		const urls = "api/web/attachment/upload.manage?token=" + sessionStorage.getItem('token');
		let policy = "";
		//uploadProps 配置方法见 https://ant.design/components/upload-cn/
		const uploadProps = {
			action: urls,
			listType: 'picture',
			onChange: this.onChange,
			fileList: this.state.responseList,
			data: (file) => {/* //自定义上传参数，这里使用UPYUN
        return {
          Authorization:file.name,
          policy: (() => {
            return policy;
          })(),
          signature: policy
        }
      */},
			multiple: true,
			showUploadList: true
		}
		return (
			<div>
				<LzEditor active={true} importContent={contents} cbReceiver={this.receiveHtml} uploadProps={uploadProps}
					image={true} video={false} audio={false} color={false} />
			</div>
		);
	}
}



//文章
const Option = Select.Option;
const { TextArea } = Input;
const RangePicker = DatePicker.RangePicker;
//时间戳 转化为时间格式
var Y, M, D, h, m, s = "";
function timestampToTime(timestamp) {
	var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000   //* 1000
	Y = date.getFullYear() + '/';
	M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
	D = date.getDate() + ' ';
	h = date.getHours() + ':'; m = date.getMinutes() + ':'; s = date.getSeconds();
	return Y + M + D + h + m + s;
}


//图片
var headerimg = "";
var imageUrl = "";
//图片
function getBase64(img, callback) {
	const reader = new FileReader();
	reader.addEventListener('load', () => callback(reader.result));
	reader.readAsDataURL(img);
}

class Avatar extends React.Component {
	state = { loading: false };
	handleChange = (info) => {
		if (info.file.status === 'uploading') {
			this.setState({ loading: true });
			return;
		}
		if (info.file.status === 'done') {
			headerimg = info.file.response.obj.path;
			imageUrl = info.file.response.obj.path;
			console.log(headerimg,imageUrl,"imageUrl")
			getBase64(info.file.originFileObj, imageUrl => this.setState({
				imageUrl,
				loading: false,
			}));
		}
	}
	render() {
		const uploadButton = (
			<div>
				<Icon type={this.state.loading ? 'loading' : 'plus'} />
				<div className="ant-upload-text">Upload</div>
			</div>
		);
		if (imageUrl == undefined) {
			imageUrl = this.state.imageUrl;
		} else {
			headerimg = imageUrl;
		}
		const urls = "api/web/attachment/upload.manage?token=" + sessionStorage.getItem('token');
		return (
			<Upload
				name="file"
				style={{ width: '200px' }}
				listType="picture-card"
				className="avatar-uploader"
				showUploadList={false}
				action={urls}
				method="POST"
				enctype="multipart/form-data"
				onChange={this.handleChange}
			>
				{imageUrl ? <img src={imageUrl} alt="" style={{ width: '200px' }} /> : uploadButton}
			</Upload>
		);
	}
}


//table 列表
const columns = [
	{
		title: '序号',
		dataIndex: 'articleId',
		key: 'articleId',
		render: (text, record, index) => { return index + 1 }
	},
	{
		title: '标题',
		dataIndex: 'title',
		key: 'title',
	}, {
		title: '时间',
		dataIndex: 'createDate',
		key: 'createDate',
		render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>,
	}, {
		title: '浏览次数',
		dataIndex: 'pageView',
		key: 'pageView',
	}, {
		title: '类型',
		dataIndex: 'type',
		key: 'type',
		render: (text, record, index) => {
			if (record.type == 1) {
				return "新闻动态"
			} else if (record.type == 2) {
				return "品牌故事"
			}
		}
	}, {
		title: '状态',
		dataIndex: 'state',
		key: 'state',
		width:'100px',
		render: (text, record, index) => {
			if (record.state == 1) {
				return "有效"
			} else if (record.state == 0) {
				return "无效"
			}
		}
	}
];

var rowSelections = "";
//table复选框选中
// rowSelection objects indicates the need for row selection
const rowSelection = {
	onSelect: (record, selected, selectedRows) => {
		rowSelections = new Object(); //声明对象
		rowSelections.selected = selected;
		rowSelections.selectedRows = selectedRows;
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		rowSelections = new Object(); //声明对象
		rowSelections.selected = selected;
		rowSelections.selectedRows = selectedRows;
	},
};
//form 表单
const FormItem = Form.Item;
//表单内容
const CollectionCreateForm = Form.create()(
	(props) => {
		const { visible, title, onCancel, onCreate, form, showModal, dispatch, objs } = props;
		const { getFieldDecorator } = form;
		return (
			<Modal
				width={'60%'}
				maskClosable={false}
				destroyOnClose={true}
				visible={visible}
				title={title}
				okText="确定"
				onCancel={onCancel}
				onOk={onCreate}
			>
				<Form layout="horizontal">
					<FormItem label="标题" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
						{getFieldDecorator('title', {
							initialValue: objs.title,
							rules: [{ required: true, message: '活动规则名称不能为空!' }],
						})(
							<Input />
							)}
					</FormItem>

					<FormItem label="文章图片" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
						{(<Avatar />)}
					</FormItem>

					<FormItem label="类型" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} className={styles.w50left}>
						{getFieldDecorator('type', {
							initialValue: objs.type == undefined ? "1" : objs.type,
							rules: [{ required: true, message: '活动规则类型不能为空!' }],
						})(<Select showSearch style={{ width: '100%' }} placeholder="请选择">
							<Option value="1">新闻动态</Option>
							<Option value="2">品牌故事</Option>
						</Select>)}
					</FormItem>
					<FormItem label="发布状态" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} className={styles.w50left}>
						{getFieldDecorator('state', {
							initialValue: objs.state == undefined ? "1" : objs.state,
						})(<Select showSearch style={{ width: '100%' }} placeholder="请选择">
							<Option value="1">有效</Option>
							<Option value="0">无效</Option>
						</Select>)}
					</FormItem>
					<FormItem label="内容" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
						{getFieldDecorator('acticleTxt', {
							initialValue: objs.acticleTxt,
						})(
							<AvatarButton />
							)}
					</FormItem>
				</Form>
			</Modal>
		);
	}
);

@connect(({ attendance, loading }) => ({
	attendance,
	loading: loading.models.attendance,
}))
@Form.create()
class App extends React.Component {
	state = {
		confirmLoading: false,
		visible: false,
		title: "新增",
		objs: "", //编辑时赋值
	};
	//打开弹窗
	showModal = (title) => {
		this.form.resetFields();
		contents = "";
		imageUrl="";
		if (title == "新增") {
			this.setState({ visible: true, title: title, objs: "" });
		} else { //查看
			if (!rowSelections || rowSelections.selected == false) {
				message.warning('还未选择数据,无操作');
			} else {
				if (rowSelections.selectedRows.length > 1) {
					message.warning('只能选择一项进行操作');
				} else {
					rowSelections.selectedRows[0].type += ''
					rowSelections.selectedRows[0].state += ''
					contents = rowSelections.selectedRows[0].acticleTxt.replace(/\$aoxin/g, '#');;
					imageUrl = rowSelections.selectedRows[0].articleBackground;
					this.setState({
						visible: true,
						title: title,
						objs: rowSelections.selectedRows[0],
					});
				}
			}
		}
	}
	//删除
	deleteModal = (title) => {
		const { dispatch, form } = this.props;
		if (!rowSelections || rowSelections.selected == false) {
			message.warning('还未选择数据,无操作');
		} else {
			var Id = [];
			if (rowSelections.selectedRows.length == 1) {
				Id.push(rowSelections.selectedRows[0].articleId);
			} else {
				for (var i = 0; i < rowSelections.selectedRows.length; i++) {
					Id.push(rowSelections.selectedRows[i].articleId);
				}
			}
			if (title == "删除") {
				Modal.confirm({
					title: '是否删除选中项?',
					content: '删除后不可还原',
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk() { //调取批量删除组织机构
						dispatch({
							type: 'attendance/remove_article',
							payload: {
								articleId: Id
							},
							callback: (res, resMsg) => {
								if (res == 1) { //成功
									message.success(resMsg);
								} else { //失败
									message.error(resMsg);
								}
							},
						});
					}
				});
			}

		}

	}
	//点击取消
	handleCancel = () => { this.setState({ visible: false }) }
	//新增
	handleCreate = (title) => {
		const form = this.form;
		form.validateFields((err, values) => {
			console.log(values,"values")
			if (err) { return; }
			console.log('Received values of form: ', values);
			if (values.state == undefined) values.state = "1"
			values.acticleTxt = contents.replace(/\#/g, '$aoxin');
			values.articleBackground=headerimg;
			console.log(values.acticleTxt);
			form.resetFields();
			if (title == "新增") { //新增
				this.props.dispatch({
					type: 'attendance/add_article',
					payload: { ...values },
					callback: (res, resMsg) => {
						if (res == 1) message.success(resMsg);
						else message.error(resMsg);
					},
				});
			} else {
				var Id = [];
				if (rowSelections.selectedRows.length == 1) {
					Id.push(rowSelections.selectedRows[0].articleId);
				} else {
					for (var i = 0; i < rowSelections.selectedRows.length; i++) {
						Id.push(rowSelections.selectedRows[i].articleId);
					}
				}
				this.props.dispatch({
					type: 'attendance/edit_article',
					payload: { ...values, articleId: Id },
					callback: (res, resMsg) => {
						if (res == 1) message.success(resMsg);
						else message.error(resMsg);
					},
				});
			}
			this.setState({
				visible: false,
			});
		});
	}
	//默认查询数据
	componentDidMount() {
		//默认查询table 数据
		this.props.dispatch({ type: 'attendance/fetch_article' });
	}
	//重置
	handleFormReset = () => {
		const { form, dispatch } = this.props;
		form.resetFields();
		this.setState({ formValues: {}, });
		dispatch({ type: 'attendance/fetch_article', });
	}
	//查询
	handleSearch = (e) => {
		e.preventDefault();
		const { dispatch, form } = this.props;
		form.validateFields((err, fieldsValue) => {
			if (err) return;
			const values = {
				...fieldsValue,
			};
			this.setState({ formValues: values });
			if (values.title == undefined) { values.title = "" }
			if (values.type == undefined) { values.type = "" }
			if (values.state == undefined) { values.state = "" }{

			}
			dispatch({
				type: 'attendance/fetch_article',
				payload: { ...values }
			});
		});
	}
	saveFormRef = (form) => { this.form = form; }
	renderAdvancedForm() {
		const { getFieldDecorator } = this.props.form;
		return (
			<Form onSubmit={this.handleSearch} layout="inline">
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={8} sm={24}>
						<FormItem label="标题">
							{getFieldDecorator('title')(
								<Input placeholder="请输入" />
							)}
						</FormItem>
					</Col>
					<Col md={8} sm={24}>
						<FormItem label="文章类型">
							{getFieldDecorator('type')(
								<Select showSearch style={{ width: '100%' }} placeholder="请选择">
									<Option value="1">新闻动态</Option>
									<Option value="2">品牌故事</Option>
								</Select>)}
						</FormItem>
					</Col>
					<Col md={8} sm={24}>
						<FormItem label="发布状态">
							{getFieldDecorator('state')(<Select showSearch style={{ width: '100%' }} placeholder="请选择">
								<Option value="1">有效</Option>
								<Option value="0">无效</Option></Select>)}
						</FormItem>
					</Col>

				</Row>
				<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
					<Col md={24} sm={24}>
						<FormItem>
							<span style={{ float: 'right', marginBottom: 24 }}>
								<Button type="primary" htmlType="submit">查询</Button>
								<Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
							</span>
						</FormItem>
					</Col>
				</Row>
			</Form>
		);
	}
	render() {
		const { visible, title, confirmLoading } = this.state;
		const { attendance: { data = [] }, loading } = this.props;
		const rowKey = function (data) { return data.articleId;/*主键id*/ };
		return (
			<PageHeaderLayout title="前台系统/文章管理" >
				<Card bordered={false}>
					<div className={styles.tableList}>
						<div className={styles.tableListForm}>
							{this.renderAdvancedForm()}
						</div>
						<div className={styles.table_operations} >
							<Button type="primary" onClick={() => this.showModal('新增')}>新增</Button>
							<Button type="primary" onClick={() => this.showModal('编辑')}>编辑</Button>
							<Button type="primary" onClick={() => this.deleteModal('删除')}>删除</Button>
						</div>
						<CollectionCreateForm
							ref={this.saveFormRef}
							title={this.state.title}
							objs={this.state.objs}
							confirmLoading={confirmLoading}
							visible={this.state.visible}
							onCancel={this.handleCancel}
							onCreate={() => this.handleCreate(this.state.title)}
						/>
						<Table rowKey={rowKey} columns={columns} rowSelection={rowSelection} loading={loading} dataSource={data} pagination={{ pageSize: 10 }}  scroll={{ x: true }}/>
					</div>
				</Card>
			</PageHeaderLayout>
		)
	}
}
export default () => (<App />)
